<template>
  <div class="stash h-full">
    <el-container class="flex flex-col h-full">
      <el-header class="bg-white flex justify-between items-center">
        <div></div>
        <el-button type="primary" @click="dialogRef?.openDialog()"
          >新建仓库</el-button
        >
      </el-header>
      <el-main class="bg-white my-2 flex-1">
        <el-table
          :data="stashList"
          max-height="430"
          style="width: 100%"
          class="h-full"
        >
          <el-table-column
            prop="name"
            label="姓名"
            width="120"
            align="center"
          />
          <el-table-column
            prop="phone"
            label="联系方式"
            width="180"
            align="center"
          />
          <el-table-column
            prop="area"
            label="占地面积"
            width="120"
            align="center"
          >
            <template #default="{ row }"> {{ row.area }} ㎡ </template>
          </el-table-column>
          <el-table-column
            prop="capacity"
            label="仓容定额"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              {{
                row.capacity >= 10000
                  ? (row.capacity / 10000).toFixed(1) + "万"
                  : row.capacity
              }}
              m³
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="180"
            align="center"
          />
          <el-table-column prop="remark" label="备注" align="center" />
          <el-table-column
            fixed="right"
            label="操作"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              <el-button
                link
                type="primary"
                size="small"
                @click="dialogRef?.openDialog(row)"
              >
                修改
              </el-button>
              <el-popconfirm
                title="你确定要删除吗"
                @confirm="removeStash(row.id)"
              >
                <template #reference>
                  <el-button link type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer class="bg-white flex justify-end">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :disabled="disabled"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-footer>
    </el-container>
    <Dialog ref="dialogRef" @closeDialogEvent="closeDialogEvent"></Dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getStash, deleteStash } from "@/api/stash.ts";
import Dialog from "./dialog.vue";

onMounted(() => {
  getStashList();
});

const totalCount = ref();
const stashList = ref();
const disabled = ref();
const currentPage = ref(1);
const pageSize = ref();
const dialogRef = ref();

const getStashList = async () => {
  const res = await getStash({
    page: currentPage.value,
    pageSize: pageSize.value
  });
  console.log("getStashList", res);
  totalCount.value = res.totalCount;
  stashList.value = res.items;
};

const closeDialogEvent = async () => {
  getStashList();
};
const handleSizeChange = () => {
  getStashList();
};
const handleCurrentChange = () => {
  getStashList();
};

const removeStash = async id => {
  await deleteStash({
    id
  });
  ElMessage({
    message: "删除成功",
    type: "success"
  });
  getStashList();
};
</script>

<style scoped>
.main-content {
  padding: 16px 16px !important;
  margin: 0 !important;
}
</style>
